<template>
    <div class="container">
        <div class="carnumber">
            <div>出场车牌号识别</div>
            <el-upload class="upload-demo" drag action="" :http-request="handleupload">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过1MB</div>
            </el-upload>
            <div class="int">车牌照</div>
            <img :src="imgSrc" alt="识别的车牌" v-if="imgSrc" class="img">
        </div>
        <div class="show">
            <div>出场车牌号:{{ message.carnumber }}</div>
            <div style="margin-top: 20px;">进场时间:{{ message.startTime }}</div>
            <div style="margin-top: 20px;">出场时间:{{ message.endTime }}</div>
            <div style="margin-top: 20px;">停车费用：{{this.cost}}</div>
            <div style="margin-top: 20px;">订单编号：{{message.orderNo}}</div>
        </div>
        <div class="money">
            收费牌
            <el-card class="box-card">
                {{ message.rules }}
            </el-card>

        </div>




    </div>
</template>

<script>
import { uploadIdNumberImg } from "@/api/parkingcar/number.js"
import { Rules } from "@/api/parkingcar/rules.js"
import {costOrder, carOrder } from "@/api/parkingcar/order.js"

export default {
    data() {
        return {

            imgSrc: null,
            cost:null,

            message:{
            rules: null,
            carnumber: null,            
            startTime: null,
            endTime: null,
            carId: null,
            orderId:null,
            orderNo:null,
            }

        }
    },
    methods: {
        handleupload(file) {
            const formData = new FormData();
            formData.append('imgFile', file.file);
            uploadIdNumberImg(formData).then(res => {
                this.message.carnumber = res.data.Number;
                this.$modal.msgSuccess("识别成功");
                // 创建一个可以在浏览器中显示的 URL
                this.imgSrc = URL.createObjectURL(file.file);
                console.log(this.imgSrc);
                const currentTime = new Date().toLocaleString();
                console.log(this.message.carnumber);
                const data = {
                    licensePlate: this.message.carnumber
                }
                //根据车牌查询订单信息
                carOrder(data).then(res => {
                    this.message.endTime = currentTime;
                    this.message.carId = res.data.carId;
                    this.message.orderId  = res.data.orderId;
                    this.message.startTime = res.data.startTime;
                    this.message.orderNo = res.data.orderNo;

                    console.log(res,44444444);
                   
                    costOrder(this.message).then(res =>{
                        
                        console.log(res,5555555)    
                        this.cost = res.cost   
                    })
                   
                });

            }).catch(error => {
                console.error("上传失败：", error);
                this.$modal.msgError("上传失败");
            });
        },
        handleSuccess(response, file) {
            // 处理上传成功的逻辑
            console.log('Upload success:', file);
        },
        fetchRules() {
            Rules().then(response => {
                this.message.rules = response.data.node;
            });
        },

    },
    created() {
        this.fetchRules();
    },
}
</script>

<style>
.container {
    display: flex;
    margin-top: 100px;
    margin-left: 100px;
}

.carnumber {
    float: left;
    width: 350px;
    height: 200px;
    margin-right: 10px;
    /* 与右侧元素的距离 */
}

.money {
    width: 400px;
    /* 与卡片宽度一致 */
    float: left;
    margin-left: 300px;
}

.box-card {
    width: 100%;
}

.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}

.show {
    float: left;
    width: 180px;
    margin-top: 20px;
    margin-left: 10px;
}

.int {
    float: left;
    margin-top: 50px;


}

.img {
    width: 300px;
    height: 150px;
    margin-top: 10px;

}

.outshow {
    float: left;
    width: 180px;
    margin-top: -210px;
    margin-left: 370px;
}
</style>
